<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="我的订单" @clickLeft="leftBack" background-color="#318cff" color="#fff">
			<view slot="other" class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-bg-white">
				<view v-for="(item,index) in tabs" @click="orderTab(item.id)" class="dfj-flex-1 dfj-pd-tb-20" :class="state == item.id?'dfj-bd-b-base dfj-bd-w-4':''">{{ item.name }}</view>
			</view>
		</uni-nav-bar>
		<view class="dfj-mg-t-50 dfj-pd-t-30">
			<block v-for="(item,index) in list">
				<view class="dfj-mg-t-20 dfj-mg-lr-20 dfj-bg-white dfj-bd-radius-20">
					<navigator :url="`/pages/my/order-details?orderId=${item.id}`">
						<view class="dfj-flex dfj-flex-ai-c dfj-pd-20 dfj-t-666">
							<view class="dfj-flex-1"><text class="dfj-icon icon-shangjia dfj-mg-r-20"></text>自营</view>
							<view class="dfj-t-base">{{ item.orderStatus | filtersState }}</view>
						</view>
						<block v-for="(otw,idx) in item.productOrderList">
							<view class="dfj-flex">
								<view><image :src="otw.iconUrl" style="width: 180rpx;height: auto;" mode="widthFix"></image></view>
								<view class="dfj-flex-1 dfj-mg-l-25 dfj-t-666">
									<view class="dfj-f-28">{{ otw.productTitle }}</view>
									<view class="dfj-mg-t-30">
										<text class="dfj-f-35 dfj-t-danger">￥{{ otw.price }}</text><text class="dfj-mg-l-30">共{{ otw.amount }}件</text>
									</view>
								</view>
							</view>
						</block>
					</navigator>
					<view class="dfj-t-r dfj-pd-30 dfj-bd-t-e5e dfj-t-r dfj-t-666" v-if="item.orderStatus == 0">
						<text>合计：</text><text class="dfj-mg-r-30 dfj-t-danger dfj-f-35">￥{{item.totalPrice}}</text><navigator class="dfj-inline-block dfj-bg-base dfj-t-white dfj-bd-radius-35 dfj-pd-lr-20 dfj-pd-tb-10" :url="`/pages/home/pay?orderNo=${item.id}&orderMoney=${item.totalPrice}`">去支付</navigator>
					</view>
					<view class="dfj-t-r dfj-pd-30 dfj-bd-t-e5e dfj-t-r dfj-t-666" v-if="item.orderStatus == 3">
						<text class="dfj-inline-block dfj-bg-base dfj-t-white dfj-bd-radius-35 dfj-pd-lr-20 dfj-pd-tb-10" @click="makeSureGoods(item.id)">确认收货</text>
					</view>
				</view>
			</block>
		</view>
		
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white">
				<view class="dfj-pd-30 dfj-t-c">
					<view class="dfj-t-666 dfj-f-28">请输入交易密码</view>
					<!-- <view class="dfj-pd-tb-30 dfj-f-35 dfj-t-999">支付：<text class="dfj-t-danger">￥890.0</text></view> -->
					<view class="code-box">
						<block v-for="(item, index) in 6" :key="index">
							<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
						</block>
					</view>
				</view>
				<view class="keyboard">
					<block v-for="(item, index) in 9" :key="index">
						<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
					</block>
					<view class="keyboard-item hide"></view>
					<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
					<view class="keyboard-item delte" @tap="del()"><image style="width: 60rpx;height: auto;" mode="widthFix" src="/static/img/home/del.png" :lazy-load="true"></image></view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {//'全部','待付款','待发货','待收货','已完成'
				tabs: [
					{id:'-1',name:'全部'},
					{id:'0',name:'待付款'},
					{id:'2',name:'待发货'},
					{id:'3',name:'待收货'},
					{id:'4',name:'已完成'},
				],
				state: -1,
				page: 1,
				list: [],
				password: '',
				makeSureId: ''
			}
		},
		onLoad(options) {
			this.state = options.state || '-1';
		},
		onShow() {
			this.list = [],
			this.page = 1,
			this.getList()
		},
		filters:{
			filtersState(val) {
				let txt;
				if(val == 0){
					txt = '待付款'
				}else if(val == 2){
					txt = '待发货'
				}else if(val == 3){
					txt = '待收货'
				}else if(val == 4){
					txt = '已完成'
				}
				return txt;
			}
		},
		methods: {
			leftBack() { 
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
			orderTab(i) {
				if(this.state == i){
					return false
				}
				this.state = i,
				this.list = [],
				this.page = 1,
				this.getList()
			},
			makeSureGoods(id){
				this.makeSureId = id
				this.$refs.popup.open()
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						
						this.$http({
							url: '/order/confirmOrder',
							data: {
								orderId: this.makeSureId,
								payPwd: this.password
							}
						}).then(res=> {
							if(res.flag){
								this.$refs.popup.close()
								this.list = [],
								this.page = 1,
								this.getList()
								this.password = ''
							}else{
								this.password = ''
							}
						})
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			getList(){
				this.$http({
					url: '/order/getOrderList',
					data: {
						state: this.state, //-1全部 0 待付款 2待发货 3代收款 4已完成
						page: this.page,
						rows: 20,
						rnd:Math.random()
					},
					method: 'GET',
					rnd:Math.random()
				}).then(res=>{
					if(res.data.list.length>0){
						this.page++;
						this.list.push(...res.data.list);
					}
				})
			}
		},
		onReachBottom(){
			this.getList();
		},
	}
</script>

<style lang="scss" scoped>
	.pay-fixed{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		z-index: 9;
		.pay-bottom{
			background: #318CFF;
			border-radius: 60rpx;
			vertical-align: top;
			width: 100%;
		}
	}
	
	.keyboard{
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #EBEBEB;
		border-top:none;
		border-left:none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.code-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #d0d0d0;
	}
	.code-box-item {
		width: 86rpx;
		height: 86rpx;
		background: #fff;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
		flex: 1;
		border: 1rpx solid #e5e5e5;
	}
</style>
